<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#boardDiv, #guestDiv, #memberDiv{
width: 800px;

margin: 10px;
padding:20px;
border:5px dotted black;
}
.btn{
border:5px solid #1DDB16;
}
.title{
text-align:right;
width: 800px;
border:5px dashed pink;
margin: 10px;
padding:5px 20px 5px 20px;
}
</style>
<script>
var rs1, rs2, rs3;
var xhr;

function init(){
		
	// xhr 객체
	xhr = new XMLHttpRequest();

/*
 *  입력, 출력 객체를 생성
 */
	var btn1 = document.querySelector('#btnBoardFind');  // querySelector는 브라우저와 버전의 호환성이 조금 떨어진다.
	var btn2 = document.querySelector('#btnGuestFind');
	var btn3 = document.querySelector('#btnMemberFind');
	
	
	btn1.onclick=function(){
		xhr.onreadystatechange = boardFunc;
		var inputB = document.querySelector('#boardFind').value;
		var url = "../board/list_ajax.jsp?find=" + inputB;
		
		xhr.open('get', url, true);
		xhr.send();
	}
	
	btn2.onclick=function(){
		xhr.onreadystatechange = guestFunc;
		var inputG = document.querySelector('#guestFind').value;
		var url = "../guest/list.jsp?find=" + inputG;
		
		xhr.open('get', url, true);
		xhr.send();
	}
	
	btn3.onclick=function(){
		xhr.onreadystatechange = memberFunc;
		var inputM = document.querySelector('#memberFind').value;
		var url = "../board/member_Ajax.jsp?find=" + inputM;
		
		xhr.open('get', url, true);
		xhr.send();
	}
	
	
	function boardFunc(){
		if(xhr.status == 200 && xhr.readyState ==4){
			var div1 = document.querySelector('#boardDiv'); 
			div1.innerHTML = xhr.responseText;
		}

	}
	function guestFunc(){
		if(xhr.status == 200 && xhr.readyState ==4){
			var div2 = document.querySelector('#guestDiv');
			div2.innerHTML = xhr.responseText;

		}
	}
	function memberFunc(){
		if(xhr.status == 200 && xhr.readyState ==4){
			var div3 = document.querySelector('#memberDiv');
			div3.innerHTML = xhr.responseText;

		}
	}
	
}
</script>
</head>
<body>

  <div>
    <h2>게시판</h2>
    <div class="title">
       <input type="text" id="boardFind" class="btn" placeholder="여기">
        <input type="button" value="검색" id="btnBoardFind"><br/>
    </div>
    <div id="boardDiv">
       
    </div>
  </div>
  
  <br/>
  
  <div>
  	<h2>방명록</h2>
  	<div class="title">
  	  <input type="text" id="guestFind" class="btn" placeholder="여기">
      <input type="button" value="검색" id="btnGuestFind"><br/>
  	</div>
  	<div id="guestDiv">
  	  
  	</div>
  </div>
  
  <br/>
  
  <div>
  	<h2>회원</h2>
  	<div class="title">
  	  <input type="text" id="memberFind" class="btn" placeholder="여기">
      <input type="button" value="검색" id="btnMemberFind"><br/>
  	</div>
  	<div id="memberDiv">
  	  
  	</div>
  </div>
  
<script> init(); </script>
</body>
</html>